<template>
	<div>
		<el-row>
			<el-col>
				<el-form :inline="true" :model="searchForm" style="margin-left: 30px; margin-top: 20px; width: 80%; float: left">
					<el-form-item label="姓名">
						<el-input v-model="searchForm.userName" size="small"></el-input>
					</el-form-item>
					<el-form-item label="是否启用">
						<el-select v-model="searchForm.status" size="small">
							<el-option label="启用" value="1"></el-option>
							<el-option label="禁用" value="2"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="query" size="small">查询</el-button>
					</el-form-item>
				</el-form>
				<el-button size="small" type="primary" v-permission="'user.query'" style="float: right; margin-top: 25px; margin-right: 40px" @click="add">新增</el-button>
			</el-col>
		</el-row>
		<el-row style="margin-left: 20px">
			<el-table size="small" :data="tableData" border stripe style="width: 98%">
				<el-table-column prop="userName" label="用户姓名" align="center"></el-table-column>
				<el-table-column prop="name" label="账号" align="center"></el-table-column>
				<el-table-column prop="sex" label="性别" align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.sex == 1">男</span>
						<span v-if="scope.row.sex == 2">女</span>
					</template>
				</el-table-column>
				<el-table-column prop="status" label="账号状态" align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.status == 1">启用</span>
						<span v-if="scope.row.status == 2">禁用</span>
					</template>
				</el-table-column>
				<el-table-column prop="email" label="邮箱" align="center"></el-table-column>
				<el-table-column prop="multiLogin" label="是否允许多人登录" align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.multiLogin == 'true'">允许</span>
						<span v-if="scope.row.multiLogin == 'false'">不允许</span>
					</template>
				</el-table-column>
				<el-table-column prop="createDate" label="创建时间" align="center"></el-table-column>
				<el-table-column fixed="right" label="操作" width="160">
					<template slot-scope="scope">
						<el-button type="text" size="small" @click="relationRole(scope.row)">关联角色</el-button>
						<el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
						<el-button type="text" size="small" @click="remove(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				style="margin-top: 10px"
				background
				:page-sizes="[10, 20, 50, 100, 200]"
				:page-size="pageData.pageSize"
				layout="prev, pager, next,sizes"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="pageData.pageNum"
				:total="pageData.total"
			></el-pagination>
		</el-row>

		<!--穿梭框-->
		<el-dialog title="关联角色" :visible.sync="transforDialog" width="650px">
			<el-transfer
				filterable
				v-model="selectedRows"
				:titles="['全部角色', '已选角色']"
				:props="{
					key: 'id',
					label: 'name'
				}"
				:data="roleList"
			></el-transfer>
			<span slot="footer" class="dialog-footer">
				<el-button @click="transforDialog = false">取 消</el-button>
				<el-button type="primary" @click="transforDialogSubmit">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 弹框 -->
		<el-dialog :title="dialogText" :close-on-click-modal="false" :visible.sync="dialog" width="600px" @close="dialogCancel">
			<el-form ref="dialogForm" :model="dialogForm" :rules="rules" label-width="130px">
				<el-form-item label="账号" prop="name">
					<el-input v-model="dialogForm.name"></el-input>
				</el-form-item>
				<el-form-item label="用户姓名" prop="userName">
					<el-input v-model="dialogForm.userName"></el-input>
				</el-form-item>
				<el-form-item label="邮箱" prop="email">
					<el-input v-model="dialogForm.email"></el-input>
				</el-form-item>
				<el-form-item label="性别" prop="sex">
					<el-select v-model="dialogForm.sex">
						<el-option label="男" value="1"></el-option>
						<el-option label="女" value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="账号状态" prop="status">
					<el-select v-model="dialogForm.status">
						<el-option label="启用" value="1"></el-option>
						<el-option label="禁用" value="2"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="是否允许多人登录" prop="multiLogin">
					<el-select v-model="dialogForm.multiLogin">
						<el-option label="允许" value="true"></el-option>
						<el-option label="不允许" value="false"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogCancel">取 消</el-button>
				<el-button type="primary" @click="dialogSubmit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
import { userList, register, editUser, remove, roleUserList, roleUser } from '@/api/system/user';
import { roleList } from '@/api/system/role';
export default {
	data() {
		return {
			searchForm: {},
			tableData: [],
			dialogText: '新增用户',
			dialog: false,
			mode: 'add',
			roleList: [],
			selectedRows: [],
			transforDialog: false,
			currentUserId: '',
			rules: {
				name: [{ required: true, message: '请输入账号', trigger: 'blur' }],
				userName: [{ required: true, message: '请输入用户姓名', trigger: 'blur' }],
				sex: [{ required: true, message: '请选择性别', trigger: 'blur' }]
			},
			dialogForm: {
				name: '',
				userName: '',
				sex: '',
				email: '',
				status: '1',
				multiLogin: 'true'
			},
			pageData: {
				pageNum: 1,
				pageSize: 20,
				total: 0
			}
		};
	},
	mounted() {
		this.query();
		roleList().then((res) => {
			if (res.rows && res.rows.length) {
				this.roleList = res.rows;
			}
		});
	},
	methods: {
		query() {
			let tempObj = {};
			Object.assign(tempObj, this.searchForm);
			tempObj.pageNum = this.pageData.pageNum;
			tempObj.pageSize = this.pageData.pageSize;
			userList(tempObj).then((res) => {
				this.tableData = res.rows;
				this.pageData.total = res.total;
			});
		},
		handleSizeChange(value) {
			this.pageData.pageSize = value;
			this.query();
		},
		handleCurrentChange(value) {
			this.pageData.pageNum = value;
			this.query();
		},
		relationRole(item) {
			this.currentUserId = item.id;
			roleUserList({ userId: item.id }).then((res) => {
				if (res.data && res.data.length) {
					this.selectedRows = res.data.map((e) => e.id);
				}
				this.transforDialog = true;
			});
		},
		add() {
			this.dialogForm.id = null;
			this.dialogForm.phone = null;
			this.dialogForm.lastLoginDate = null;
			this.dialogForm.password = null;
			this.dialogForm.updateDate = null;
			this.dialogForm.updateId = null;
			this.dialogText = '新增用户';
			this.dialog = true;
			this.mode = 'add';
		},
		edit(item) {
			this.dialogText = '编辑用户';
			this.mode = 'edit';
			this.dialog = true;
			this.$nextTick(() => {
				Object.assign(this.dialogForm, item);
			});
		},
		dialogCancel() {
			this.dialog = false;
			this.$refs['dialogForm'].resetFields();
			console.info('cancel', this.dialogForm);
		},
		dialogSubmit() {
			this.$refs['dialogForm'].validate((valid) => {
				if (valid) {
					if (this.mode == 'add') {
						let tempObj = {};
						Object.assign(tempObj, this.dialogForm);
						tempObj.password = '123456';
						tempObj.confirmPassword = '123456';
						register(tempObj).then(() => {
							this.dialog = false;
							this.$message({ message: '新增用户成功', type: 'success' });
							this.$refs['dialogForm'].resetFields();
							this.query();
						});
					} else if (this.mode == 'edit') {
						editUser(this.dialogForm).then(() => {
							this.dialog = false;
							this.$message({ message: '编辑用户成功', type: 'success' });
							this.$refs['dialogForm'].resetFields();
							this.query();
						});
					}
				}
			});
		},
		transforDialogSubmit() {
			roleUser({ userId: this.currentUserId, roleIds: this.selectedRows.join(',') }).then((res) => {
				if (res.code && res.code === '200') {
					this.transforDialog = false;
					this.$message({ message: '关联角色成功', type: 'success' });
				}
			});
		},
		remove(id) {
			this.$confirm('确认要删除这条数据吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				remove(id).then(() => {
					this.$message({ message: '删除用户成功', type: 'success' });
					this.query();
				});
			});
		}
	}
};
</script>
